<script setup>
import router from '@/router';
import { useRoute } from 'vue-router';

function backClick() {
	router.back()
}

const route = useRoute()
const sourceList = JSON.parse(route.query.id)
</script>

<template>
	<div class="container">
		<header class="header">
			<span class="left" @click="backClick"> &lt; </span>
			<span>货源详情</span>
		</header>

		<div class="content">
			<div class="u1705"><img src="/imgs/u1705.svg" alt=""></div>
			<div class="u1706">竭诚为您服务</div>

			<div class="address">
				<div class="u1707">
					<div class="u1702">装</div>
					<img class="u1704" src="/imgs//u1704.svg" alt="">
					<div class="u1703">卸</div>
				</div>
				<div class="u1708">
					<div class="u1709">
						<div class="u1710"><span>发货人：张三</span><span>18022222222</span></div>
						<div class="u1711">河北省石家庄市高新区物流园区88号仓库</div>
					</div>
					<div class="u1709" style="margin-bottom: 0;">
						<div class="u1710"><span>收货人：李四</span><span>18033333333</span></div>
						<div class="u1711">北京市海淀区物流园区100号仓库</div>
					</div>
				</div>
			</div>

			<div class="u1712">
				<div class="u1713">
					<div>
						<img src="/imgs/u1713.svg" alt="">
						<div style="font-size: 14px; color: #999;">货物信息</div>
					</div>
				</div>
				<div class="u1714">
					<div class="u1715" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
						{{sourceList.goodstype}}/ 箱装
					</div>
					<div class="u1715">
						重货/ {{sourceList.weight}}吨/ {{sourceList.volume}}方
					</div>
				</div>
			</div>

			<div class="u1716">
				<div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
					<span class="u1718">用车需求</span><span>{{sourceList.vehicle.value}}/ {{sourceList.vehicle.key}}</span>
				</div>
				<div class="u1717">
					<span class="u1718">运输类型</span>
					<span>{{sourceList.transportation}}</span>
				</div>
			</div>

			<div class="u1716" style="margin:20px 0;">
				<div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
					<span class="u1718">运输费用</span><span>{{sourceList.price}} 元</span>
				</div>
				<div class="u1717">
					<span class="u1718">支付方式</span>
					<span>线上支付</span>
				</div>
			</div>

			<div class="u1716" style="margin-bottom:20px;">
				<div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
					<span class="u1718">其他需要</span><span>{{sourceList.other}}</span>
				</div>
				<div class="u1717">
					<span class="u1718">备注（选填）</span>
					<span>{{sourceList.remark}}</span>
				</div>
			</div>
		</div>

		<footer style="position: absolute; bottom:0;">
			<div class="u1719">
				<img src="/imgs/green.png" alt="">
			</div>
			<div class="u1719">
				<img src="/imgs/red.png" alt="">
			</div>
			<div class="u1720">
				<span>接单</span>
			</div>
		</footer>

	</div>

</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	background-color: rgba(242, 242, 242, 1);
	overflow: auto;
	color: black;

	.content {
		height: calc(100% - 80px);
		overflow: auto;
	}
}

.header {
	height: 0.6rem;
	background-color: #1678ff;
	line-height: 0.6rem;
	text-align: center;
	font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	color: #FFFFFF;

	.left {
		position: absolute;
		left: 12px;
		font-size: 26px;
	}
}

footer {
	width: 100%;
	height: 80px;
	background-color: white;
	display: flex;

	.u1719 {
		width: 33%;
		display: flex;
		justify-content: center;
		align-items: center;

		img {
			width: 100px;
		}
	}

	.u1720 {
		flex: 1;
		font-size: 16px;
		background-color: #1678ff;
		color: white;
		text-align: center;
		line-height: 80px;
	}
}

.u1716 {
	height: 89px;
	background-color: white;
	font-size: 14px;
	padding-left: 20px;

	.u1717 {
		height: 44px;
		width: 100%;
		padding-right: 20px;
		line-height: 44px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.u1718 {
			color: #999;
		}
	}
}

.u1712 {
	margin: 20px 0;
	height: 89px;
	display: flex;
	background-color: white;

	.u1713 {
		height: 89px;
		width: 89px;
		border-right: 1px solid rgba(242, 242, 242, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		img {
			position: relative;
			left: 18px;
		}
	}

	.u1714 {
		flex: 1;
		font-size: 14px;

		.u1715 {
			height: 44px;
			width: 100%;
			text-align: right;
			padding-right: 20px;
			line-height: 44px;
			box-sizing: border-box;
		}
	}
}


.u1705 {
	margin: 0 auto;
	width: 90%;
}

.u1706 {
	margin: 0 auto;
	width: 90%;
	text-align: center;
	font-size: 12px;
	color: #FEB028;
	background-color: rgba(242, 242, 242, 1);
	width: 100px;
	position: relative;
	top: -12px
}

.address {
	width: 100%;
	background-color: white;
	display: flex;

}

.u1707 {
	padding: 10px 20px;

	.u1702 {
		width: 20px;
		height: 20px;
		color: #70B603;
		font-size: 12px;
		border-radius: 50%;
		border: 1px solid #70B603;
		text-align: center;
		line-height: 20px;
	}

	.u1704 {
		position: relative;
		left: 10px;
	}

	.u1703 {
		width: 20px;
		height: 20px;
		color: #FF5257;
		font-size: 12px;
		border-radius: 50%;
		border: 1px solid #FF5257;
		text-align: center;
		line-height: 20px;
	}

}

.u1708 {
	padding-right: 20px;
	flex: 1;

	.u1709 {
		margin: 10px 0;
		height: 63px;
		border-bottom: 1px solid rgba(242, 242, 242, 1);


		.u1710 {
			width: 100%;
			font-size: 14px;
			margin-bottom: 15px;
			display: flex;
			justify-content: space-between;
		}

		.u1711 {
			margin: 10px 0;
			font-size: 12px;
			color: #999;
		}

	}
}
</style>